<%--
  Created by IntelliJ IDEA.
  User: Lenovo
  Date: 2023/10/7
  Time: 11:19
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>部门信息表</title>
    <%--引入vue的js--%>
    <script src="../../js/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="../../js/index.js"></script>
    <!--引入axios的依赖-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- import CSS -->
    <link rel="stylesheet" href="../../css/index.css">
</head>
<body>
<div id="app">
    <!--    修改的弹窗-->
    <el-dialog title="修改部门信息" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="部门名称" label-width="100px">
                <el-input v-model="form.deptname"></el-input>
            </el-form-item>
            <el-form-item label="部门描述" label-width="100px">
                <el-input v-model="form.remark"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="update1">确 定</el-button>
        </div>
    </el-dialog>
    <!--        新增的弹窗-->
    <el-dialog title="添加部门" :visible.sync="dis">
        <el-form :model="addForm">
            <el-form-item label="部门名称" label-width="100px">
                <el-input v-model="addForm.deptname"></el-input>
            </el-form-item>
            <el-form-item label="部门描述" label-width="100px">
                <el-input v-model="addForm.remark"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dis = false">取 消</el-button>
            <el-button type="primary" @click="add">确 定</el-button>
        </div>
    </el-dialog>
    <!--    查询部门内的员工-->
    <el-dialog title="部门内的员工" :visible.sync="dia">
    <div v-if="selectForm.length>0">
        <el-table :data="selectForm">
            <el-table-column property="staffid" label="员工id"></el-table-column>
            <el-table-column property="staffname" label="员工名称"></el-table-column>
            <el-table-column property="idcard" label="身份证"></el-table-column>
            <el-table-column property="address" label="地址"></el-table-column>
            <el-table-column property="phone" label="手机号"></el-table-column>
        </el-table>
        <div class="block">
            <el-pagination
                    @size-change="handleSizeChange2"
                    @current-change="handleCurrentChange2"
                    :current-page="currentPage2"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="pageSize2"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total2">
            </el-pagination>
        </div>
    </div>
    <el-mepty v-else description="该部门无员工"></el-mepty>
    </el-dialog>
    <el-button type="primary" @click="dis=true">新增</el-button>
    <el-button type="primary" @click="refresh1">刷新</el-button>
    <el-table
            :data="tableData"
            border
            style="width: 100%">
        <el-table-column
                prop="deptname"
                label="部门名称"
        >
        </el-table-column>
        <el-table-column
                prop="remark"
                label="部门描述"
        >
        </el-table-column>
        <el-table-column
                prop="counts"
                label="人数"
        >
            <template slot-scope="scope">
                <template v-if="scope.row.counts == null">
                    0
                </template>
                <template v-if="scope.row.counts !== null">
                    {{ scope.row.counts }}
                </template>
            </template>

        </el-table-column>
        <el-table-column
                label="操作"
                width="400"
                            >
            <template slot-scope="scope">
                <el-button type="primary" icon="el-icon-edit" @click="toUpdate(scope.row)" size="mini">编辑</el-button>
                <el-button type="danger" icon="el-icon-delete" @click="del(scope.row.deptid)" size="mini">删除</el-button>
                <el-button type="warning" icon="el-icon-search" @click="selByDeptId(scope.row.deptid)" size="mini">
                    搜索该部门的员工
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="block">
        <el-pagination
                @size-change="handleSizeChange1"
                @current-change="handleCurrentChange1"
                :current-page="currentPage1"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="pageSize1"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total1">
        </el-pagination>
    </div>
</div>

<script>
    const app = new Vue({
        el: "#app",
        data: {
            tableData: [],
            dialogFormVisible: false,
            dis: false,
            dia: false,
            //修改部门的数据
            form: {},
            //添加部门的数据
            addForm: {},
            //查询部门员工的数据
            selectForm: [],
            //部门的分页
            total1: 0,
            pageSize1: 5,
            currentPage1: 1,
            //部门内的员工分页
            total2: 0,
            pageSize2: 5,
            currentPage2: 1,
            deptid: 0,
        },
        methods: {
            //外面的分页
            handleSizeChange1(val) {
                this.pageSize1 = val
                this.initTable()
            },
            handleCurrentChange1(val) {
                this.currentPage1 = val
                this.initTable()
            },
            initTable() {
                axios.post("/dept/list?currentPage1=" + this.currentPage1 + '&pageSize1=' + this.pageSize1).then(function (resp) {
                    app.tableData = resp.data.data.list
                    app.total1 = resp.data.data.total

                })
            },
            //部门内的分页方法
            handleSizeChange2(val) {
                this.pageSize2 = val
                this.selByDeptId(this.deptid)
            },
            handleCurrentChange2(val) {
                this.currentPage2 = val
                this.selByDeptId(this.deptid)
            },
            selByDeptId(id) {
                this.dia = true
                this.deptid = id
                console.log(id)
                //    搜索部门内的员工
                axios.get('/dept/selByDeptId', {
                    params: {
                        page: this.currentPage2,
                        pageSize: this.pageSize2,
                        deptid: id
                    }
                }).then(res => {
                    this.selectForm = res.data.data.rows;
                    this.total2 = res.data.data.total;
                })
            },
            refresh1() {
                //    刷新方法
                this.initTable()
            },
            toUpdate(row) {
                this.dialogFormVisible = true
                this.form = row
            },
            update1() {
                axios.post("/dept/update1", this.form).then(resp => {
                    if (resp.data.code===200) {
                        this.dialogFormVisible = false
                        this.$message({
                            message: '修改成功',
                            type: 'success'
                        });
                        this.initTable()
                    } else {
                        this.$message.error('修改失败！请联系管理员！');
                    }
                })
            },
            add() {
                console.log(this.addForm)
                axios.post("/dept/add", this.addForm).then(function (resp) {
                    console.log(resp)
                    if (resp.data.data === 1) {
                        app.$message({
                            message: '添加成功',
                            type: 'success'
                        });
                        app.dis = false
                        app.initTable();
                    } else {
                        app.$message.error('添加失败！请联系管理员！');
                    }
                    app.addForm={}
                })
            },
            del(deptid) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.get("/dept/del?deptid=" + deptid).then(resp => {
                        if (resp.data.data >0) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            if (this.tableData.length === 1) {
                                app.currentPage1 = 1
                            }
                            app.initTable()
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
        },
        created() {
            this.initTable();
        }
    })
</script>
</body>
</html>
